﻿@{
    ViewBag.Title = "JsonForm Tests";
}

<h2>JsonForm Tests</h2>

<div id='associated-json-form-div' style='float: right' data-json-form='{"formName":"sidebar"}'>
    <div>
        Age: <input type="text" data-json-input-name='age' data-json-input-type='number' />
    </div>
</div>

<div id='json-form-div'>
    <div>
        First Name: <input type="text" data-json-input-name='firstName' />
    </div>
    <div>
        Last Name: <input type="text" data-json-input-name='lastName' />
    </div>

    <div>
        <input type="checkbox" data-json-input-name='activeUser' /> Active User
    </div>

    <div>
        Gender: 
        <select data-json-input-name='gender'>
            <option value="Unspecified" selected></option>
            <option value="Male">Male</option>
            <option value="Female">Female</option>
        </select>
    </div>

    <div>
        Favorite Colors (multiple-select): 
        <select data-json-input-name='favoriteColors' multiple="multiple">
            <option value="Red">Red</option>
            <option value="Green">Green</option>
            <option value="Blue">Blue</option>
        </select>
    </div>

    <div>
        Height Category: 
        <input type="radio" name="form-name-height-category" data-json-input-name='heightCategory' value='Short' /> Short
        <input type="radio" name="form-name-height-category" data-json-input-name='heightCategory' value='Medium' /> Medium
        <input type="radio" name="form-name-height-category" data-json-input-name='heightCategory' value='Tall' /> Tall
    </div>

    <div data-json-form="{&quot;formName&quot;:&quot;address&quot;}">
        <div>Address</div>
        <div>
            Street: <input data-json-input-name='street' />
        </div>
        <div>
            Zip Code: <input data-json-input-name='zipCode' />
        </div>
    </div>
</div>

<div id='json-data-preview' style='margin-top: 20px'>
</div>

<script type="text/javascript">//<!--

    var jsonForm = new FlowBasis.UI.JsonForm({ 
        container: "#json-form-div",
        associatedForms: [ "#associated-json-form-div" ]
    });

    jQuery(jsonForm).bind("inputDataChanged", function() {
        // TODO: Log last time changed.
        var inputData = jsonForm.getInputData();
        var inputDataJson = JSON.stringify(inputData);
        jQuery("#json-data-preview").text(inputDataJson);
    });   
   
//--></script>